<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/less/reader.css">
    <title>阅读器</title>
    <style>

    </style>
</head>
<body>
<div id="root" class="container">
    <div id="actionMid" class="artical-action-mid"></div>
    <div id="topNav" class="top-nav" style="display: none;">
        <div class="icon-back">
            <div class="left-line"></div>
            <div class="right-line"></div>
        </div>
        <div class="nav-title">返回书架</div>
    </div>
    <div id="fictionChapterTitle"></div>
    <div id="fictionContainer" class="m-read-content">

    </div>
    <div class="m-button-bar">
        <ul class="u-tab">
            <li id="prev-button"><a href="#">上一章</a></li>
            <li id="next-button"><a href="#">下一章</a></li>
        </ul>
    </div>

    <div class="nav-pannel-bk font_container" style="display: none;"></div>
    <div id="fontContainer" class="nav-pannel font_container" style="display: none;">
        <div class="child-mod">
            <span>字号</span>
            <button id="largeFont">大</button>
            <button id="smallFont">小</button>
        </div>
        <div class="child-mod">
            <span>背景</span>
            <div class="bk-container bk-color1">
                <div class="bk-container-current"></div>
            </div>
            <div class="bk-container bk-color2">
                <div class="bk-container-current"></div>
            </div>
            <div class="bk-container bk-color3">
                <div class="bk-container-current"></div>
            </div>
            <div class="bk-container bk-color4">
                <div class="bk-container-current"></div>
            </div>
            <div class="bk-container bk-color5">
                <div class="bk-container-current"></div>
            </div>
        </div>
    </div>


    <div id="footerNav" class="footer-nav" style="display: none;">
        <ul class="nav-tab">
            <li id="listButton">
                <div class="icon">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
                <div>目录</div>
            </li>
            <li id="fontButton">
                <div class="icon">Aa</div>
                <div>字体</div>
            </li>
            <li id="nightButton">
                <div class="icon">
                    <div class="box">
                        <div class="white-arc"></div>
                        <div class="black-arc"></div>
                    </div>
                </div>
                <div id="night">夜间</div>
            </li>
        </ul>
    </div>
</div>
<script src="/static/js/zepto.js"></script>
<script>
    window.jQuery = $;
</script>
<script src="/static/js/jquery.jsonp.js"></script>
<script src="/static/js/jquery-base64.js"></script>
<script>
    (function () {
        var Util = (function () {
            var prefix = 'html5_reader_';
            var StorageGetter = function (key) {
                try {
                    return localStorage.getItem(prefix + key);
                } catch (e) {
                    console.log(e);
                }
            };
            var StorageSetter = function (key, val) {
                return localStorage.setItem(prefix + key, val);
            };
            //数据解密
            function getJSONP(url, callback) {
                return $.jsonp({
                    url: url,
                    cache: true,
                    callback: "duokan_fiction_chapter",
                    success: function (result) {
                        var data = $.base64.decode(result);
                        var json = decodeURIComponent(escape(data));
                        callback(json);
                    }
                });

            };

            return {
                getJSONP: getJSONP,
                StorageGetter: StorageGetter,
                StorageSetter: StorageSetter
            }
        })();

        var Dom = {
            topNav: $('#topNav'),
            footerNav: $('#footerNav'),
            fontContainer: $('.font_container'),
            fontButton: $('#fontButton'),
            fontButtonIcon: $('#fontButton .icon'),
            whiteArc: $('.white-arc'),
            blackArc: $('.black-arc'),
            night: $('#night'),
            bkContainer: $('.bk-container')
        };
        var Win = $(window);
        var Doc = $(document);
        var Body = $('body');
        var readerModel;
        var readerUI;
        const NIGHT = "#0f1410";
        const SUN = "#fff";
        var fictionContainer = $('#fictionContainer');
        var initFontSize = Util.StorageGetter('font_size');
        initFontSize = parseInt(initFontSize);
        if (!initFontSize) {
            initFontSize = 14;
        }
        fictionContainer.css('font-size', initFontSize);
        var UBackColor = Util.StorageGetter('background_color');
        if (!UBackColor) {
            UBackColor = "#e9dfc7";
        }
        Body.css('background', UBackColor);

        function main() {
            //todo 程序入口
            readerModel = ReaderModel();
            readerUI = ReaderBaseFrame(fictionContainer);
            readerModel.init(function (data) {
                readerUI(data);
            });
            EventHanlder();
        }

        function ReaderModel() {
            //todo 实现和阅读器相关的数据交互的方法
            var Chapter_id;
            var Chapter_total;
            var init = function (UIcallback) {
//                getFictionInfo(function () {
//                    getCurChapterContent(Chapter_id,function (data) {
//                        //TODO ...
//                        UIcallback && UIcallback(data);
//                    })
//                });
                getFictionInfoPromise().then(function () {
                    return getCurChapterContentPromise();
                }).then(function (data) {
                    UIcallback && UIcallback(data);
                });
            };
            var getFictionInfoPromise = function () {
                return new Promise(function (resolve, reject) {
                    $.get('/ajax/chapter', function (data) {
                        //TODO 获得章节信息后的回调
                        if (data.result == 0) {
                            Chapter_id = Util.StorageGetter('last_chapter_id');
                            if (Chapter_id == "NaN") {
                                Chapter_id = data.chapters[1].chapter_id;
                                console.log(Chapter_id);
                            }
                            Chapter_total = data.chapters.length;
                            resolve();
                        } else {
                            reject();
                        }

                    }, 'json')
                });
            };
            var getFictionInfo = function (callback) {
                $.get('data/chapter.json', function (data) {
                    //TODO 获得章节信息后的回调
                    Chapter_id = Util.StorageGetter('last_chapter_id');
                    if (Chapter_id == null) {
                        Chapter_id = data.chapters[1].chapter_id;
                    }
                    Chapter_total = data.chapters.length;
                    callback && callback();
                }, 'json')
            };
            var getCurChapterContentPromise = function () {
                return new Promise(function (resolve, reject) {
                    $.get('/ajax/chapter_data', {
                        id: Chapter_id
                    }, function (data) {
                        if (data.result == 0) {
                            var url = data.jsonp;
                            Util.getJSONP(url, function (jsondata) {
                                resolve(jsondata);
                            });
                        } else {
                            reject({msg: 'fail'});
                        }
                    }, 'json');
                });
            };
            var getCurChapterContent = function (chapter_id, callback) {
                $.get('data/data' + chapter_id + '.json', function (data) {
                    if (data.result == 0) {
                        var url = data.jsonp;
                        Util.getBSONP(url, function (jsondata) {
                            callback && callback(jsondata);
                        });
                    }
                }, 'json');
            };
            var prevChapter = function (UIcallback) {
                Chapter_id = parseInt(Chapter_id, 10);
                if (Chapter_id == 0) {
                    return;
                }
                Chapter_id--;
                getCurChapterContentPromise().then(function (data) {
                    UIcallback && UIcallback(data);
                });
                Util.StorageSetter('last_chapter_id', Chapter_id);
            };
            var nextChapter = function (UIcallback) {
                Chapter_id = parseInt(Chapter_id, 10);
                if (Chapter_id == Chapter_total) {
                    return;
                }
                Chapter_id++;
                getCurChapterContentPromise().then(function (data) {
                    UIcallback && UIcallback(data);
                });
                Util.StorageSetter('last_chapter_id', Chapter_id);
            };
            return {
                init: init,
                prevChapter: prevChapter,
                nextChapter: nextChapter
            }
        }

        function ReaderBaseFrame(container) {
            //todo 渲染基本的UI结构
            function parseChapterData(jsonData) {
                var jsonObj = JSON.parse(jsonData);
                var html = '<h4>' + jsonObj.t + '</h4>';
                for (var i = 0; i < jsonObj.p.length; i++) {
                    html += '<p>' + jsonObj.p[i] + '</p>';
                }
                return html;
            }

            return function (data) {
                container.html(parseChapterData(data));
            }
        }

        function EventHanlder() {
            //todo 交互的事件绑定
            $('#actionMid').on('click', function () {
                if (Dom.topNav.css('display') == 'none') {
                    Dom.topNav.show();
                    Dom.footerNav.show();
                } else {
                    Dom.topNav.hide();
                    Dom.footerNav.hide();
                    Dom.fontContainer.hide();
                    Dom.fontButtonIcon.removeClass('activate');
                    Dom.whiteArc.removeClass('activate-icon');
                }
            });


            Dom.fontButton.on('click', function () {
                Dom.whiteArc.removeClass('activate-icon');
                if (Dom.fontContainer.css('display') == 'none') {
                    Dom.fontContainer.show();
                    Dom.fontButtonIcon.addClass('activate');
                } else {
                    Dom.fontContainer.hide();
                    Dom.fontButtonIcon.removeClass('activate');
                }
            });

            $('#nightButton').on('click', function () {
                //TODO 出发背景切换的事件
                Dom.fontContainer.hide();
                Dom.fontButtonIcon.removeClass('activate');
                if (Dom.blackArc.css('display') != 'none') {
                    Dom.blackArc.hide();
                    Body.css('background', NIGHT);
                    Dom.night.text('白天');
                } else {
                    Dom.blackArc.show();
                    Body.css('background', SUN);
                    Dom.night.text('夜间');
                }
                Dom.whiteArc.addClass('activate-icon');
            });

            $('#largeFont').on('click', function () {
                if (initFontSize >= 20) {
                    return;
                }
                initFontSize++;
                fictionContainer.css('font-size', initFontSize);
                Util.StorageSetter('font_size', initFontSize);
            });

            $('#smallFont').click(function () {
                if (initFontSize <= 12) {
                    return;
                }
                initFontSize--;
                fictionContainer.css('font-size', initFontSize);
                Util.StorageSetter('font_size', initFontSize);
            });

            Dom.bkContainer.each(function () {
                var backColor = $(this).css('background');
                $(this).on('click', function () {
                    Body.css('background', backColor);
                    Util.StorageSetter('background_color', backColor);
                });
            });


            Win.on('scroll', function () {
                Dom.topNav.hide();
                Dom.footerNav.hide();
                Dom.fontContainer.hide();
                Dom.fontButtonIcon.removeClass('activate');
                Dom.whiteArc.removeClass('activate-icon');
            });

            $('#prev-button').on('click', function () {
                readerModel.prevChapter(function (data) {
                    readerUI(data);
                })
            })

            $('#next-button').on('click', function () {
                readerModel.nextChapter(function (data) {
                    readerUI(data);
                })
            })
        }

        main();
    })();
</script>
</body>
</html>